﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Administration Module</title>
        <!-- Themes -->
        <link href="theme/style.css" rel="Stylesheet" type="text/css" />
        <!-- JavaScript libraries -->
        <script type="text/javascript" src="lib/jquery-1.5.js"></script>
        <script type="text/javascript" src="lib/jquery.tmpl.js"></script>
        <script type="text/javascript" src="lib/jquery.jcacher-1.0.0.js"></script>
        <script type="text/javascript" src="lib/datatables/jquery.dataTables.js"></script>
        <script type="text/javascript" src="lib/jquery.simplemodal-1.4.1.js"></script>
        <!-- jQuery Templates -->
        <script id="EntryTemplate" type="text/x-jquery-tmpl" >
            <tr>
                <td>${NPA}</td><td>${NXX}</td><td>${XXXX}</td><td>${State}</td><td>${City}</td><td><input type="image" src="img/delete.png" alt="Delete" onclick="disallowEntry(${NPA}, ${NXX}, {{if XXXX }} ${XXXX} {{else}} '' {{/if}} )"/></td>
            </tr>
        </script>
        <script id="ConfirmAllowExchangeTemplate" type="text/x-jquery-tmpl" >
            <div id="confirm-dialog">
                <h3>Confirm</h3>
            </div>
        </script>
        <script type="text/javascript" src="script/js/admin_module.js"></script>
        <script type="text/javascript">
            //Bind the onReady event.
            $(document).ready(onReady);
        </script>
    </head>
    <body>
        <table id="AllowedEntriesTable" class="appTheme">
            <thead>
                <!--Title Bar with AJAX loader icon-->
                <tr>
                    <td colspan="5"><h3>NPA-NXX/ANI Administration</h3></td><td colspan="1"><img id="LoadingIndicator" src="img/load.gif" alt="Loading..." /></td>
                </tr>
                <!-- Status Bar Displays Result of Most Recent Operations-->
                <tr>
                    <td id="StatusBar" colspan="6"></td>
                </tr>
                <!-- Input fields for Filters -->
                <tr>
                    <td>
                        <input type="text" id="FilterNPA" size="3" maxlength="3" />
                    </td>
                    <td colspan="2">

                    </td>
                    <td>
                        <input type="text" id="FilterState" size="3" maxlength="2" />
                    </td>
                    <td colspan="2">

                    </td>
                </tr>
                <!-- Column Names -->
                <tr>
                    <th>NPA</th><th>NXX</th><th>XXXX</th><th>State</th><th>City</th><th><img src="img/delete.png" alt="Delete"/></th>
                </tr>
            </thead>
            <!-- Rows for allowed entries -->
            <tbody id="AllowedEntriesTableBody">
                <tr>
                    <td colspan="6"></td>
                </tr>
            </tbody>
            <tfoot>
                <!-- Input fields for adding an entry -->
                <tr>
                    <td>
                        <input type="text" id="AddNPA" size="3" maxlength="3" />
                    </td>
                    <td>
                        <input type="text" id="AddNXX" size="3" maxlength="3" />
                    </td>
                    <td>
                        <input type="text" id="AddXXXX" size="4" maxlength="4" />
                    </td>
                    <td colspan = "3">
                        <input type="image" id="AddEntryButton" src="img/add.png" alt="Add Entry" />
                    </td>
                </tr>
                <!-- Buttons for Navigating to Different Pages -->
	            <tr id="PaginationFooter">
	                <td colspan="7">
		                <img src="img/first.png" id="FirstPage" alt="First Page" class="first"/>
		                <img src="img/prev.png" id="PreviousPage" alt="Previous Page" class="prev"/>
		                <span id="PageDisplay" class="pagedisplay"></span>
		                <img src="img/next.png" id="NextPage" alt="Next Page" class="next"/>
		                <img src="img/last.png" id="LastPage" alt="Last Page" class="last"/>
		            </td>
	            </tr>
                <!-- Total Record Information -->
                <tr>
                    <td id="TotalPageInfo" colspan="6">
                        &nbsp
                    </td>
                </tr>
                <tr>
                    <td id="TotalRecordInfo" colspan="6">
                        &nbsp
                    </td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>
